<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<script src="js/base64.min.js"></script>-->
		<script src="../static/js/jquery-3.1.0.min.js"></script>
		<!-- <script src="js/ytx-web-im-min-new-5.4.0.js"></script> -->
		<!--<script src="js/MD5.min.js"></script>-->
		<!--<script src="https://app.cloopen.com/im50/ytx-web-im-min-5.3.2r14.js" type="text/javascript" charset="utf-8"></script>-->
		<!--<script src="js/ytx-web-im5.4.0r1-rbhttps.js" type="text/javascript" charset="utf-8"></script>-->
		<title></title>
	</head>
	<body>
		<div>
			<span>用户账号</span><input type="text" id="username">
			<span>用户密码</span><input type="text" id="password">
			<button id="login">登录</button>
		</div>
		<div>
			<span>发送信息给</span><input type="text" id="username2">
			<span>输入消息</span><input type="text" id="message">
			<button id="sendBtn">发送</button>
		</div>

		<div style="width: 300px;float: left;    border: 1px solid;">
			<div>单聊信息列表</div>
			<div id="dan">


			</div>
		</div>
	</body>
	<script>
		var socket = null;
		var username = null;
		var password = null;
		$(function() {
			$('#login').click(function () {
				userLogin();
            });

			$('#sendBtn').click(function () {
				var mess = $("#message").val().trim();
				var reciver = $("#username2").val().trim();
                var username = $("#username").val().trim();
				if (mess){
				    sendMess(mess,reciver,username);
				    $("#message").val('');
				}
            }).keyup(function (e) {
				var keyCode = e.which() || e.keyCode;
				if (keyCode == 13){
				    $("#sendBtn").click();
				}
            });
        });

		function sendMess(mess,reciver,username) {
			send("{'username':'"+username+"','mess':'"+mess+"','reciver':'"+reciver+"','type':2}");
        }
        function send(mess) {
			if (!window.socket){
			    return;
			}
			if (socket.readyState == WebSocket.OPEN){
			    console.log("send:"+mess);
			    window.socket.send(mess);
			} else {
			    alert("连接失败，请重新登录");
			}
        }

		function userLogin() {
			if (!username){
			    username = $('#username').val().trim();
                username = $('#password').val().trim();
			}
			if (username){
			    if (!window.WebSocket){
			        window.WebSocket = window.MozWebSocket;
				}
				if (window.WebSocket){
				    socket = new WebSocket("ws://localhost:12321/websocket");
				    socket.onmessage = function (ev) {
				        var data = eval("("+ev.data + ")");
				        console.log("onmessage data:"+JSON.stringify(data));
				        console.log(data.type);
						switch (data.type) {
							case 1:

							    break;
							case 2:
								console.log("broadcast message"+JSON.stringify(data))
								broadcastInvake(data);
							    break;
                        }
					};
				    window.socket.onopen = function (event) {
						console.log("连接成功");
						openInvake(event);
                    };
				    window.socket.onclose = function (event) {
						console.log("连接失败");
						closeInvake(event);
                    };
				}else {
				    alert("您的浏览器不支持WebSocket");
				}
			} else {
			    alert("请输入用户名");
			}
        }

        function broadcastInvake(data) {
            var htstr = $("#dan").html()
            var msg = data.mess;
            var sender = data.username;
            mesStr = "<div>" + sender + "：" + msg + "</div>"
            $("#dan").html(htstr + mesStr)
        };

		function openInvake(event) {
			var obj = {};
			obj.type = 9;
			obj.username = $('#username').val().trim();
			obj.password = $('#password').val().trim();
			send(JSON.stringify(obj));
        }
	</script>
</html>
